<template>
  <div class="page-wrapper">
    <div class="header">
      <el-row>
        <el-col :span="12">
          <el-image class="logo" src="/image/logo.png" fit="contain" alt="logo" @click="homeClick" />
        </el-col>
        <el-col :span="12" class="right">
          <div class="user-info">
            <img class="icon" src="/image/userInfo.png" alt="" />
            <el-dropdown>
              <span class="el-dropdown-link">
                {{ states.userName }}
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="changePassword">{{ lang.CHANGE_PASSWORD }}</el-dropdown-item>
                  <el-dropdown-item @click="exit">{{ lang.QUIT }}</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="display: flex;">
      <div class="sider">
        <el-scrollbar class="menu-wrapper">
          <el-menu mode="vertical" router active-text-color="#ffd04b" background-color="aliceblue" text-color="#000"
            :unique-opened="true" :default-active="router.currentRoute.value.href">
            <template v-for="menu in states.menuList">
              <el-sub-menu v-if="menu.children.length > 0 || menu.url === undefined"
                :index="`#${menu.url}?id=${menu.id}`">
                <template #title>
                  <img class="icon" :src="menu.icon" alt="" />
                  <span>{{ menu.name }}</span>
                </template>
                <el-menu-item v-for="subMenu in menu.children" :index="`#${subMenu.url}?id=${subMenu.id}`"
                  :route="{ path: subMenu.url, query: { id: subMenu.id } }">
                  <img class="icon" :src="subMenu.icon" alt="" />
                  <span>{{ subMenu.name }}</span>
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item v-else :index="`#${menu.url}?id=${menu.id}`"
                :route="{ path: menu.url, query: { id: menu.id } }">
                <img class="icon" :src="menu.icon" alt="" />
                <span>{{ menu.name }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </el-scrollbar>
      </div>
      <div class="main">
        <router-view :request="props.request" :success="props.success" :warning="props.warning" :info="props.info"
          :confirm="confirm" :error="props.error" :loading="props.loading" :closeLoading="props.closeLoading">
        </router-view>
      </div>
    </div>

    <!-- 修改密码 start -->
    <el-dialog v-model="showDlg" :title="dataForm.title" width="30%" :close-on-click-modal="false"
      :modal-append-to-body='false'>
      <el-form :model="dataForm" label-width="80px" :rules="dataForm.rules" ref="pwdFormRef" label-position="right">
        <el-form-item label="账&nbsp;&nbsp;&nbsp;号" prop="accountname">
          <el-input :value="accountName" type="text" disabled></el-input>
        </el-form-item>
        <el-form-item label="旧密码" prop="oldpassword">
          <el-input v-model="dataForm.oldpassword" type="password" auto-complete="off" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpassword">
          <el-input v-model="dataForm.newpassword" type="password" auto-complete="off" show-password clearable></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmpwd">
          <el-input v-model="dataForm.confirmpwd" type="password" auto-complete="off" show-password clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-top: 5px;">
        <el-button @click.native="showDlg = false">取消</el-button>
        <el-button type="primary" @click.native="changePwd">提交
        </el-button>
      </div>
    </el-dialog>
    <!-- 修改密码 end -->

  </div>
</template>
<script setup>
import { onBeforeMount, reactive, ref } from "vue";
import { lang } from "../lang";
import { ArrowDown } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
import { useStore } from "../store";

const router = useRouter();
const store = useStore();
const props = defineProps([
  "request",
  "success",
  "warning",
  "info",
  "error",
  "loading",
  "confirm",
  "closeLoading",
]);

const states = reactive({
  menuList: [],
  userName: "",
  routePath: "",
});

const homeClick = () => {
  router.push("/");
};

const changePassword = () => {
  showDlg.value = true;
};

const exit = () => {
  store.clearUser();
  localStorage.removeItem("access-token");
  router.replace("/Login");
};

const getMenuList = async () => {
  let response = await props.request("Menu/GetMenuList", {});
  if (response.Code === "S") {
    states.menuList = response.Data;
  } else {
    props.error(response.Msg);
  }
};

onBeforeMount(() => {
  states.userName = store.user.userName;
  if(store.user.userName != null){
    getMenuList();
  }
  else{
    router.replace("/Login");
  }
});

//##########################################修改密码专区##################################
const showDlg = ref(false)
const pwdFormRef = ref(null)
const accountName = ref(store.user.accountName)

const dataForm = reactive({
  title: '修改密码',
  accountname: '',
  oldpassword: '',
  newPassword: '',
  confirmpwd: '',
  rules: {
    oldpassword: [
      { message: '请输入旧密码', required: true, trigger: 'blur' }
    ],
    newpassword: [
      { message: '请输入新密码', required: true, trigger: 'blur' }
    ],
    confirmpwd: [
      { message: '请输入确认密码', required: true, trigger: 'blur' }
    ],
  },
});

const changePwd = () => {
  if(dataForm.newpassword != dataForm.confirmpwd){
      props.error('确认密码与新密码不一致！');
      return false;
  }
  pwdFormRef.value.validate((valid) => {
    if (!valid) {
      return false
    }
    // 接口修改密码
    props.request("User/ChangePassword", {
      UserName: store.user.accountName,
      Password: dataForm.oldpassword,
      NewPassword: dataForm.newpassword
    }).then(res => {
      if (res.Code === "S") {
        props.success('修改成功！')
        showDlg.value = false;//关闭弹出框
        //退出重新登录
        exit();
      } else {
        props.error('修改失败！')
      }
    });
  })
}
//######################################修改密码专区#####################################
</script>
<style scoped lang="less">
@import "../index.less";

.header {
  height: @header-height;
  width: @header-width;
  background: -webkit-linear-gradient(#71d2f5, #02ce9d);

  .logo {
    width: 200px;
    height: @header-height;
  }

  .logo:hover {
    cursor: pointer;
  }

  .right {
    display: flex;
    justify-content: end;
    align-items: center;

    .icon {
      width: 18px;
      height: 18px;
      margin: 0 10px;
    }

    .user-info {
      width: 130px;
      height: 40px;
      padding: 0 10px;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 30px;
      display: flex;
      justify-content: start;
      align-items: center;
      color: #b8ceda;

      .el-dropdown-link {
        cursor: pointer;
        color: #b8ceda;
        display: flex;
        align-items: center;
      }
    }
  }
}

.icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
  vertical-align: top;
}

.sider {
  height: calc(~"@{page-wrapper-height} - @{header-height}");
  width: @sider-width;

  .menu-wrapper {
    width: calc(100% - 1px);
    height: 100%;
    border-right: 1px solid #c1bdbd;
    ;
    background-color: aliceblue;
  }
}

.main {
  height: calc(~"@{page-wrapper-height} - @{header-height}");
  width:calc(~"@{page-wrapper-width} - @{sider-width}");
}

.dialog-footer {
  text-align: center;
}
</style>
